<template>
     <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
          />
          <Editor
            style="height: 300px; width: 100%; overflow-y: hidden;"
            @onChange="onChange"
            @onCreated="handleCreated"
          />
        </div>

</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import {  shallowRef, onMounted, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
//const valueHtml = ref('<p>hello</p>')

//单向数据流 父---子传递数据
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

//绑定一个通知  提前通知父类我要改变什么内容了
const emit = defineEmits(['update:modelValue'])


onMounted(() => { 
    console.log(props.modelValue);
    
})
const onChange = (editor: any) => { 
    emit('update:modelValue', editor.getHtml())
}

watch(() => props.modelValue, (newValue: any, oldValue: any) => { 
  console.log("我感应到你的新值了：",newValue, oldValue);
  editorRef.value.setHtml(newValue)
})

const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}


</script>